.a-center {
    align-items: center;
}

.j-center {
    justify-content: center;
}

.f1 {
    flex: 1;
}

.no-zoom.page-background {
    height: 50vh !important;
}

.page-background {
    height: 100vh;
    background-color: #021342;
}


.-window {
    width: 100%;
}

.-window > .header > div {
    width: calc(100% - 15px);
    text-align: center;
}

.-window > .body {
    /*
    background-color: #021342;
     */
    margin: 0 1px;
    padding-top: 15px;
    border-left:solid 1px #00a7ff;
    border-right:solid 1px #00a7ff;
}

.-window > .header {
    background-image: url("./window/head-center.png");
    background-repeat: repeat-x;
    background-size: auto 100%;
    background-position: center top;
    height: 40px;
    display: flex;
    align-items: center;
}

.-window > .bottom {
    background-image: url("./window/bottom-center.png");
    background-repeat: repeat-x;
    background-size: auto 100%;
    background-position: center top;
    height: 10px;
    display: flex;
    align-items: center;
}

.-window > .header:before {
    background-image: url("./window/head-left.png");
    background-position: left top;
}

.-window > .header:after {
    background-image: url("./window/head-right.png");
    background-position: right top;
}

.-window > .bottom:before {
    background-image: url("./window/bottom-left.png");
    background-position: left top;
}

.-window > .bottom:after {
    background-image: url("./window/bottom-right.png");
    background-position: right top;
}

.-window > .header:before,
.-window > .bottom:after,
.-window > .bottom:before,
.-window > .header:after {
    background-repeat: no-repeat;
    background-size: auto 100%;
    content: " ";
    display: inline-block;
    min-width: 5px;
    height: 100%;
    flex: 1;
}